<template>
  <el-select
    v-model="id"
    :multiple="false"
    collapse-tags
    style="width: 100%"
    @change="handleChange"
    :placeholder="$t('labels.pleaseSelect')"
  >
    <el-option
      v-for="item in datas"
      :key="item.id"
      :label="item.name"
      :value="item.id"
      :class="optionClass"
    >
      <span>{{ item.name }}</span>
    </el-option>
  </el-select>
</template>
<script>
import { getJournalWords } from "@/api/journal";
export default {
  data() {
    return {
      datas: [],
    };
  },
  model: {
    prop: "id",
    event: "innerChange",
  },
  methods: {
    getData() {
      getJournalWords({ pageIndex: 1, pageSize: 10000 }).then((res) => {
        this.datas = res ? res.items : [];
        if (!this.id && this.datas.length > 0) {
          this.id = this.datas[0].id;
          this.handleChange(this.id);
        }
      });
    },
    handleChange(value) {
      this.$emit("innerChange", value);

      let selected = !value ? {} : this.datas.find((x) => x.id == value);
      this.$emit("change", selected);
    },
  },
  watch: {},
  mounted() {
    this.getData();
  },
  props: {
    id: {
      type: String,
    },
    optionClass: {
      type: String,
      default: "",
    },
  },
};
</script>
